<template>
  <div class="">
    <el-dialog :title="$tt('label_supplier_add_goods')" :before-close="beforeClose" append-to-body
      :visible.sync="dialogVisible" custom-class="dialog_big">
      <el-radio-group v-if="dialogData.supplierId" v-model="queryCriteria" @change="initTable">
        <el-radio-button label="All">{{ $t('label_all') }}</el-radio-button>
        <el-radio-button label="supplier">{{ dialogData.supplierName }}</el-radio-button>
      </el-radio-group>

      <ex_super_table_page v-bind="option" @selection-change="selecttionChange" ref="SuperTablePage"
        @grid-data-change="gridDataChange" :autoLoad="false" :urlParams="{
          supplierId: dialogData.supplierId,
          customerId: dialogData.customerId,
          skuStatus: 'ENABLE'
        }"
        :url="queryCriteria === 'All' ? '/mms-api/sku/MmsSkuInfoRpc/selectPage.json' : '/oms-api/purchase/OmsPurchaseSupplierRefRpc/selectSupplierRefPage.json'" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="hide">{{ $tt('label_cancel') }}</el-button>
        <el-button type="primary" @click="submit">{{ $tt('label_confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import superTablePageFunction from "@/mixin/super-table-page-function";
import page_table_model_manage from "@/mixin/page_table_model_manage";
export default {
  components: {},
  mixins: [
    superTablePageFunction,
    page_table_model_manage,
  ],
  props: {
    dialogData: Object,
    selectData: {
      type: Boolean,
      default: false,
    },
    hasSelectList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      queryCriteria: 'All',

      option: {
        style: {
          height: "500px",
        },
        search: {
          model: [
            {
              label: "label_keyword",
              key: "keyword",
              type: "input",
              if: () => this.queryCriteria === 'All',
              attrs: {
                placeholder: `${this.$tt("label_name")} / ${this.$tt(
                  "label_code"
                )} / ${this.$tt("label_barcode")}`,
              },
            },
          ],
        },
        table: {
          attrs: {},
          model: this.init_table_model(),
        },
      },
    };
  },
  watch: {},
  computed: {},
  created() { },
  mounted() { },
  methods: {
    gridDataChange(e) {
      let key = this.queryCriteria==='All'? 'id':'skuId'
      this.$nextTick(() => {
        e.forEach(row => {
          for (let index = 0; index < this.hasSelectList.length; index++) {
            const element = this.hasSelectList[index];
            if (element.skuId === row[key]) {
              this.$refs.SuperTablePage.toggleRowSelection(row, true);
              break
            }
          }

        })
      })
    },
    beforeClose(done) {
      this.$refs.SuperTablePage.clearSelection();
      done()
    },
    selecttionChange(e) {
      this.selection = e
    },
    show() {
      this.dialogVisible = true;

      if (this.dialogData.supplierId) {
        this.queryCriteria = 'supplier'
      } else {
        this.queryCriteria = 'All'
      }
      this.initTable()
    },
    initTable() {
      this.$nextTick(() => {
        if (this.queryCriteria === 'All') {
          this.option.search = {
            model:
              [
                {
                  label: "label_keyword",
                  key: "keyword",
                  type: "input",
                  if: () => this.queryCriteria === 'All',
                  attrs: {
                    placeholder: `${this.$tt("label_name")} / ${this.$tt(
                      "label_code"
                    )} / ${this.$tt("label_barcode")}`,
                  },
                },
              ]
          }
        } else {
          this.option.search = null
        }

        this.reload()
      })

    },
    hide() {
      this.dialogVisible = false;
      this.$refs.SuperTablePage.clearSelection();
    },
    option_table_model() {
      return [
        {
          type: "selection",
          clickToggle: true,
          keyGroup: "label_table_operate",
        },
        { key: "skuBarcode", label: "label_sku_code", "min-width": 150 },
        { key: "skuOnlyCode", label: "label_sku_only_code", "min-width": 180 },
        {
          key: "skuName",
          label: "label_sku_name",
          "min-width": 130,
          "show-overflow-tooltip": true,
        },
        {
          key: "customerCode",
          label: "label_customer_code",
          "min-width": 130,
          "show-overflow-tooltip": true,
        },
      ];
    },
    submit() {
      if (!this.selection || this.selection.length === 0) {
        return;
      }
      // 只获取选中数据
      if (this.selectData) {
        if(this.queryCriteria === 'All'){
          this.selection.forEach(item=>{
            item.skuId = item.id
          })
        }
        this.$emit("selectData", this.selection,this.queryCriteria);
        return;
      }
      const bindingDetailList = [];
      this.selection.forEach((item) => {
        bindingDetailList.push({
          isFirstChoice: "Y",
          supplierOnlyCode: this.dialogData.supplierOnlyCode,
          skuOnlyCode: item.skuOnlyCode,
        });
      });
      this.$ajax({
        url: "/oms-api/purchase/OmsPurchaseSupplierRefRpc/addSupplierRef.json",
        type: "json",
        data: { bindingDetailList },
        success: (res) => {
          if (res.code === 0) {
            this.$refs.SuperTablePage.clearSelection();
            this.dialogVisible = false;
            this.$message.success(this.$tt("tip_operate_success"));
            this.$emit("getList");
          }
        },
      });
    },
  },
  destroyed() { },
};
</script>

<style lang="less" scoped></style>
